<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ page import="com.ymt.bpm.util.Const" %>
<!DOCTYPE html>
<%
String path = request.getContextPath();
String loginName = (String)session.getAttribute(Const.LOGINNAME);
String displayName = (String)session.getAttribute(Const.DISPLAYNAME);
String lang = (String)session.getAttribute(Const.LANG);

String profile = (String)request.getAttribute("profile");
String productionVersion = (String)request.getAttribute("productionVersion");
String cdn = (String)request.getAttribute("cdn");
String fmdCtx = (String)request.getAttribute("fmdCtx");
%>
<html>
<head>
	<title>任务办理&nbsp;&nbsp;&nbsp;<%= request.getAttribute("title")!=null ? request.getAttribute("title") : "" %></title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

	<link rel="shortcut icon" href="<%=cdn%>/favicon.ico"/>

	<%
	if ("dev".equalsIgnoreCase(profile)) {
	%>
	<link href="<%=cdn%>/static/skins/lightblue/assets/dhtmlx4/skins/dhx_skyblue_clouds/dhtmlx.css" rel="stylesheet" type="text/css">

	<link href="<%=cdn%>/static/skins/lightblue/assets/bootstrap/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
	<link href="<%=cdn%>/static/skins/lightblue/assets/bootstrap/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">

	<link href="<%=cdn%>/static/skins/lightblue/assets/bootstrap/global/css/components-md.css" rel="stylesheet" type="text/css">
	<link href="<%=cdn%>/static/skins/lightblue/assets/bootstrap/global/css/plugins-md.css" rel="stylesheet" type="text/css">

	<link href="<%=cdn%>/static/skins/lightblue/assets/bootstrap/global/plugins/bootstrap-sweetalert/sweetalert.css" rel="stylesheet" type="text/css">
	<link href="<%=cdn%>/static/skins/lightblue/assets/bootstrap/global/plugins/bootstrap-toastr/toastr.min.css" rel="stylesheet" type="text/css">

	<link href="<%=cdn%>/static/jsplatform/portal/layout/task/v0/custom.css" rel="stylesheet">
	<link href="<%=cdn%>/static/jsplatform/portal/layout/task/v0/wrapper.css" rel="stylesheet">
	<link href="<%=cdn%>/static/skins/lightblue/assets/platform/designer/css/diagram-js.css" rel="stylesheet">

	<link href="<%=cdn%>/static/skins/lightblue/assets/jquery-ui/jquery-ui.css" rel="stylesheet" type="text/css">
	<link href="<%=cdn%>/static/skins/lightblue/assets/bootstrap/global/plugins/jstree/themes/default/style.min.css" rel="stylesheet" type="text/css">

	<link href="<%=cdn%>/static/skins/lightblue/assets/bootstrap/global/plugins/datetimepicker4form/timepicker-m.css" rel="stylesheet" type="text/css">
	<link href="<%=cdn%>/static/skins/lightblue/assets/bootstrap/global/plugins/datetimepicker4form/bootstrap-datetimepicker-m.css" rel="stylesheet" type="text/css">

	<link href="<%=cdn%>/static/skins/lightblue/assets/bootstrap/global/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" type="text/css">

	<% } else { %>
	<link href="<%=cdn%>/static/skins/lightblue/assetsmin/platform/task/task.all.css?<%=productionVersion%>" rel="stylesheet" type="text/css">
	<% }%>
</head>

<body>

	<!--Script should before formfile-->
	<%
	if ("dev".equalsIgnoreCase(profile)) {
	%>
	<script src="<%=cdn%>/static/jslib/3rdpartyother/json2.js" type="text/javascript"></script>
	<script src="<%=cdn%>/static/jslib/3rdpartyother/lodash.core.js" type="text/javascript"></script>
	<script src="<%=cdn%>/static/jslib/bootstrap/global/plugins/jquery.js" type="text/javascript"></script>
	<script src="<%=cdn%>/static/jslib/jquery/jquery.form.min.js" type="text/javascript"></script>
	<script src="<%=cdn%>/static/jslib/3rdpartyother/angular-all.min.js" type="text/javascript"></script>
	<script src="<%=cdn%>/static/jslib/jquery/jquery.tipsy.js" type="text/javascript"></script>

	<script src="<%=cdn%>/static/jslib/bootstrap/global/plugins/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>

	<script src="<%=cdn%>/static/jslib/dhtmlx4/alone/dhxgrid.js" type="text/javascript"></script>
	<script src="<%=cdn%>/static/jslib/dhtmlx4/ext/dhxgrid.js" type="text/javascript"></script>
	<script src="<%=cdn%>/static/jslib/dhtmlx4/ext/excell_types.js" type="text/javascript"></script>
	<script src="<%=cdn%>/static/jslib/dhtmlx4/alone/dhxtoolbar.js" type="text/javascript"></script>

	<script src="<%=cdn%>/static/jslib/bootstrap/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>

	<script src="<%=cdn%>/static/jslib/bootstrap/global/plugins/datetimepicker4form/bootstrap-timepicker-m.js" type="text/javascript"></script>
	<script src="<%=cdn%>/static/jslib/bootstrap/global/plugins/datetimepicker4form/bootstrap-datetimepicker-m.js" type="text/javascript"></script>
	<script src="<%=cdn%>/static/jslib/bootstrap/global/plugins/bootstrap-table/bootstrap-table.js" type="text/javascript"></script>

	<script src="<%=cdn%>/static/jslib/bootstrap/global/plugins/bootstrap-sweetalert/sweetalert.js" type="text/javascript"></script>
	<script src="<%=cdn%>/static/jslib/bootstrap/global/plugins/bootstrap-toastr/toastr.js" type="text/javascript"></script>
	<script src="<%=cdn%>/static/jslib/bootstrap/global/plugins/bootbox/bootbox.min.js" type="text/javascript"></script>
	<script src="<%=cdn%>/static/jslib/bootstrap/global/plugins/jstree/jstree.min.js"></script>

	<script src="<%=cdn%>/static/jsplatform/portal/layout/task/v0/bootstrap-modal-ext.js" type="text/javascript"></script>
	<script src="<%=cdn%>/static/jsplatform/portal/layout/task/v0/common.js" type="text/javascript"></script>

	<script src="<%=cdn%>/static/jslib/bootstrap/global/plugins/bootstrap-datetimepicker/locales/bootstrap-datetimepicker.<%=lang%>.js" type="text/javascript"></script>
	<script src="<%=cdn%>/static/jslib/bootstrap/global/plugins/bootstrap-table/locale/bootstrap-table-<%=lang%>.js" type="text/javascript"></script>

	<script src="<%=cdn%>/static/jslib/3rdpartyother/svg/snap.svg-min.js" type="text/javascript"></script>
	<script src="<%=cdn%>/static/jslib/3rdpartyother/svg/vivus.js" type="text/javascript"></script>
	<script src="<%=cdn%>/static/jslib/3rdpartyother/plupload-2.3.6/plupload.full.min.changed.js" type="text/javascript"></script>

	<script src="<%=cdn%>/static/jsplatform/admin/designer/flow_style.js" type="text/javascript"></script>
	<script src="<%=cdn%>/static/jsplatform/portal/layout/task/v0/attachment.js?<%=productionVersion%>" type="text/javascript"></script>
	<% } else { %>
	<script src="<%=cdn%>/static/jsmin/platform/task/task.all.js?<%=productionVersion%>" type="text/javascript"></script>
	<% }%>

	<script src="<%=cdn%>/static/jslib/dhtmlx4/ext/dhx_i18n_<%=lang%>.js?<%=productionVersion%>"></script>
	<script src="<%=cdn%>/static/jsplatform/portal/layout/task/v0/todo_i18n_<%=lang%>.js?<%=productionVersion%>"></script>
	<script src="<%=cdn%>/static/jsplatform/portal/layout/task/v0/todo.js?<%=productionVersion%>"></script>

	<nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="min-width:345px;padding-top: 7px;">
		<div class="navbar-header">
			<a class="navbar-brand" href="javascript:void(0)" id="pi-title-bar"></a>
		</div>
		<div class="btn-group pull-right btng-common">
			<button type="button" class="btn btn-default pull-right" style="margin-right:10px;margin-left:10px;" onclick="closeWin()">
				<i class="fa fa-times"></i>
				关闭
			</button>
		</div>
		<div class="btn-group pull-right btng-common" style="display: none; margin-right:10px;">
			   <button type="button" class="btn btn-primary" onclick="doSave()">
			      <i class="glyphicon glyphicon-saved"></i>
			      	保存
			   </button>
			   <button type="button" class="btn btn-primary" onclick='showOptionModal()'>
			   		<i class="glyphicon glyphicon-circle-arrow-right"></i>
			      提交下一步
			   </button>   
			   <button type="button" style="display:none" id="btn_return" class="btn btn-primary" data-toggle='modal' data-target='#modal_return'>
			  		<i class="glyphicon glyphicon-backward"></i>
			      驳回
			   </button>
			   <button type="button" style="display:none" id="btn_reassign" class="btn btn-primary">
			  		<i class="glyphicon glyphicon-share-alt"></i>
				   转交
			   </button>   
			   <button type="button" style="display:none" id="btn_involve" class="btn btn-primary">
			  		<i class="glyphicon glyphicon-new-window"></i>
			      加签
			   </button>
				<button type="button" style="display:none" id="btn_defer" class="btn btn-primary">
					<i class="glyphicon glyphicon-new-window"></i>
				</button>
			<!-- <div class="btn-group">
			   <button type="button" class="btn btn-default dropdown-toggle" 
			      data-toggle="dropdown">
			      	<i class="glyphicon glyphicon-chevron-down"></i>&nbsp;更多...
			      	<span class="caret"></span>
			   </button>
			   <ul class="dropdown-menu" role="menu">
			      <li>
			      	<a href="javascript:" id="btn_reassign">
			      		<i class="glyphicon glyphicon-share-alt"></i>&nbsp;&nbsp;转办
			      	</a>
			      </li>
			      <li>
			      	<a href="javascript:" id="btn_involve">
			      		<i class="glyphicon glyphicon-new-window"></i>&nbsp;&nbsp;加签
			      	</a>
			      </li>
			      <li><a href="javascript:"><i class="glyphicon glyphicon-volume-down"></i>&nbsp;&nbsp;通知</a></li>
			   </ul>
			</div> -->
		</div>
		<div class="btn-group pull-right btng-claim" style="margin-right:10px;">
			<button type="button" class="btn red" id="btn_claim" style="display: none">
				<i class="fa fa-check-square-o"></i>
			</button>
			<button type="button" class="btn btn-default" id="btn_unclaim" style="display: none">
				<i class="fa fa-minus-square-o"></i>
			</button>
		</div>
	</nav>

	<div class="tableTabDiv">
		<ul id="navTab" class="nav nav-tabs navClear">
			<li class="active"><a href="#tabbody_1" data-toggle="tab" id="nav_tab_main">主表单</a></li>
			<li><a href="#tabbody_2" data-toggle="tab" id="tabnav_attach" style="display:none">附件&nbsp;<span class="badge badge-info"></span></a></li>
			<li id="tabnav_history"><a href="#tabbody_3" data-toggle="tab">历史</a></li>
			<li><a href="#tabbody_4" data-toggle="tab">流程图</a></li>
		</ul>
	</div>
	<!-- 驳回视图 -->
	<div class='modal fade' id='modal_return' data-backdrop='static'>
		<div class='modal-dialog'>
			<div class='modal-content'>
				<div class='modal-header'>
					<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
					<h4 class="modal-title">可驳回环节列表</h4>
				</div>
				<div class='modal-body'>
						<table id="tablerejects" class="table"
                        data-height="340">
                        </table>
                        <br/>
						<div class="input-group input-group-lg">
						  <span class="input-group-addon">备注</span>
						  <input type="text" class="form-control" id="returnOpinion" name="returnOpinion" maxlength="20">
						</div>
				</div>
				<div class='modal-footer'>
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary">驳回</button>
				</div>
			</div>
		</div>
	</div>
	<!-- 备注视图 -->
	<div class="modal fade" id='opinionmodal' data-backdrop='static'>
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	        <h4 class="modal-title">请输入办理备注</h4>
	      </div>
	      <div class="modal-body" style="height:100px">
	      <div class="input-group input-group-lg">
			  <span class="input-group-addon">备注</span>
			  <input type="text" class="form-control" id="completeOpinion" name="completeOpinion" maxlength="20">
			</div>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
	        <button type="button" class="btn btn-primary" onclick="doSubmit()">提交</button>
	      </div>
	    </div>
	  </div>
	</div>
	
	<div id="main" ng-controller="datactx">
		<div id="navTabContent" class="tab-content">
			<div class="tab-pane fade in active" id="tabbody_1">
			
				<div id="fmcontainer_block_pi" class="panel panel-info container " style="display:block;margin-top:0.7em">
				 <div class="panel-heading">
				  <h3 class="panel-title">流程基本信息<span class="spanCaretBottom"></span></h3>
				 </div>
				 <div class="container1 panel-body" style="display: block;">
				  <div class="row">
				   <div class="col-md-2">
				    <p>流程名称</p>
				   </div>
				   <div class="col-md-4">
				    <span class="form-output " style="display:block;" id="pi-bpdName"></span>
				   </div>
				   <div class="col-md-2">
				    <p>申请人</p>
				   </div>
				   <div class="col-md-4">
				    <span class="form-output " style="display:block;"><span class="ng-binding" id="pi-userName"></span></span>
				   </div>
				  </div>
				  <div class="row">
				   <div class="col-md-2">
				    <p>申请时间</p>
				   </div>
				   <div class="col-md-4">
				    <span class="form-output " style="display:block;"><span class="ng-binding" id="pi-createTime"></span></span>
				   </div>
				   <div class="col-md-2">
				    <p>申请部门</p>
				   </div>
				   <div class="col-md-4">
				    <span class="form-output " style="display:block;"><span class="ng-binding" id="pi-deptName"></span></span>
				   </div>
				  </div>
				  <div class="row">
					  <div class="col-md-2">
						  <p>标 题</p>
					  </div>
					  <div class="col-md-4">
						  <span class="form-output " style="display:block;" id="pi-title"></span>
						  <input type="text" style="display:none;" class="form-control  ng-valid ng-dirty" maxlength="20" id="pi-title-input" desc="标题">
					  </div>
					   <div class="col-md-2">
						<p>业务单据号</p>
					   </div>
					   <div class="col-md-4">
						<span class="form-output " style="display:block;"><span class="ng-binding" id="pi-bizNo"></span></span>
					   </div>
				  </div>
				 </div>
				</div>
			
				<% String formfile = (String)request.getAttribute("formfile");
		        if (formfile!=null && formfile.trim().length()>0) {%>
		        <jsp:include page="<%=formfile%>" ></jsp:include>
		        <%} %>
			</div>
			<div class="tab-pane fade" id="tabbody_2">
				<jsp:include page="./attachment.jsp" ></jsp:include>
			</div>
			<div class="tab-pane fade" id="tabbody_3">
				<div class="panel panel-default table-responsive">
					<table class="table table-bordered table-responsive">
				        <thead>
				          <tr class="info">
				            <th width="5%">序号</th>
				            <th width="15%">环节名称</th>
				            <th width="10%">办理人名称</th>
				            <th width="12%">创建时间</th>
				            <th width="12%">接收时间</th>
				            <th width="12%">完成时间</th>
				            <th width="10%">耗时</th>
				            <th width="29%">备注</th>
				          </tr>
				        </thead>
				        <tbody id="tbody_his">
				        </tbody>
				      </table>
			     </div>
			</div>
			<div class="tab-pane fade" id="tabbody_4">
				<ul id="navTabSvg" class="nav nav-tabs navClear">
				</ul>
				<div id="navTabContentSvg" class="tab-content">
				</div>
			</div>
		</div>
	</div>


<script type="text/javascript">

    var loginName = "<%=loginName%>";
    var displayName = "<%=displayName%>";
    var lang = '<%=lang%>';
    var lang_dp = "zh-CN";
    var pageName = "handletask";

    var resloc = '<%=cdn%>';
    var engloc = "/bpmp-engine";
    var apiloc = '/bpmp-engine/api';
    var ctxpath = '<%=path%>';
    var fmdCtx = '<%=fmdCtx%>';

    var imgpath = resloc+'/static/skins/lightblue/images';
    dhtmlx.image_path = resloc+'/static/skins/lightblue/assets/dhtmlx4/imgs/';	//used in grid component
    var imagepath = dhtmlx.image_path;	//used in grid component
    var dhx_skin = 'dhx_skyblue';

    var tl = {};
    tl.rest = apiloc + '/v1/engine';
    tl.tiid = '<%=request.getAttribute("tiId")!=null ? request.getAttribute("tiId") : ""%>';
    tl.task = <%=request.getAttribute("ti")%>;
    tl.pi = <%=request.getAttribute("pi")%>;
    tl.mainPi = <%=request.getAttribute("mainPi")%>;
    tl.bpd = <%=request.getAttribute("bpd")%>;
    tl.version = <%=request.getAttribute("version")%>;
    tl.activityConf = <%=request.getAttribute("activityConf")%>;
    tl.bizInput = <%=request.getAttribute("bizInput")%>;
    tl.curTasks = <%=request.getAttribute("curTasks")%>;
    tl.curActivities = <%=request.getAttribute("curActivities")%>;
    tl.delta = '<%=request.getAttribute("delta")!=null ? request.getAttribute("delta") : "null"%>';

    $(document).ready(function(){
        var viewer = new TaskViewer();
        viewer.init();
    });

</script>

</body>
</html>